<template>
  <div class="creator">
    <div class="ban">
      <i class="iconfont icon-fanhui" @click="$router.back()"></i>
      <div class="title">{{ this.$route.query.nav.title }}</div>
    </div>

    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item v-model="value" :options="option" />
      <van-dropdown-item title="全部职业" ref="item">
        <ul class="banner">
          <li v-for="item in banners" :key="item.id">{{ item.title }}</li>
        </ul>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="list">
      <ul >
        <li class="lists" v-for="list in createList" :key="list.id" @click="getUserId(list)">
          <div class="create-top">
            <div class="top-left">
              <img :src="list.avatar" alt="" />
              <div class="top-center">
                <h5>{{ list.username }}</h5>
                <p>
                  <span>{{list.occupation }}</span>
                    <span>.</span>
                  <span>粉丝{{ list.count.count_follower }}</span>
                </p>
              </div>
            </div>

            <div class="top-right">关注</div>
          </div>
          <div class="articles">
              <ul>
                  <li class="article" v-for="article in list.articles" :key="article.id">
                      <div>
                          <img :src="article.cover" alt="">
                          <span>{{getPlayTime(article.duration)}}'{{getPlaySecond(article.duration)}}"</span>
                      </div>
                  </li>
              </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { DropdownMenu, DropdownItem } from "vant";

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
  data() {
    return {
      createList: null,
      banners: null,
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
    };
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
      getPlayTime: function (times) {
       if(times / 60<10){
            return "0"+ parseInt(times / 60)
        }else{
            return parseInt(times/60)
        }
    },
    getPlaySecond: function (times) {
       if(times % 60<10){
            return "0"+ parseInt(times % 60);
        }else{
            return  parseInt(times % 60);
        }
    },
      getUserId(child){
      console.log("user",child.id);
        this.$router.push({ path: "/user",query:{id:child.id} })
      this.$store.commit("getIdVideo",{id:child.id})
    },
  },
  created: function () {
    this.axios
      .get(
        "https://apis.netstart.cn/xpc/creators?role_type=person&order=hot&occupation_id=1"
      )
      .then((res) => {
        this.createList = res.data.data.list;
        this.banners = res.data.data.filter.categories.options;
        console.log(this.createList);
      });
  },
};
</script>

<style lang="less" scoped>
.creator {
  .ban {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 48px;
    box-shadow: 0px -1px 0px inset rgba(224, 221, 221, 0.568);
    i {
      font-size: 24px;
      margin-left: 10px;
      color: #333;
    }
    .title {
      flex: 1;
      text-align: center;
      font-weight: 600;
      color: #333;
    }
  }
  .banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    li {
      width: 85px;
      height: 30px;
      font-size: 14px;
      margin: 4px;
      text-align: center;
      line-height: 30px;
      border-radius: 4px;
      box-shadow: 1px 1px 4px rgba(221, 218, 218, 0.788);
    }
  }
  .list {
    ul {
      .lists {
          margin: 10px;
        .create-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .top-left {
            display: flex;
            align-items: center;
            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
            }
            .top-center{
                margin-left: 8px;
                h5{
                    font-weight: 600;
                    font-size: 15px;
                }
                p{
                    font-size: 12px;
                    color: #aaa;
                    span{
                        margin-right: 4px;
                    }
                }
            }
          }
          .top-right{
              height: 30px;
              width: 80px;
              color: red;
              background: #ee7b7788;
              border-radius: 14px;
              text-align: center;
              line-height: 30px;
          }
        }
      }
    }
    .articles{
        ul{
            display: flex;
            .article{
                margin-right: 10px;
                margin-top: 10px;
                div{
                    position: relative;
                    img{
                        width: 120px;
                        border-radius: 4px;
                    }
                    span{
                        position: absolute;
                        right: 4px;
                        bottom: 4px;
                        color: white;
                        font-size: 14px;
                    }
                }
            }
        }
    }
  }
}
</style>